<template>
	<view class="content mainpadding">
		<view class="mainpadding ffffff bordert flexbetween">
			<view class="justify_between_column" style="height: 228rpx;">
				<!-- 電影票 -->
				<!-- <view class="text_j color_ling yihang title">八角笼中</view>
				<view class="text_x color_san">今天7月17日 13:45-14:45</view>
				<view class="text_a color_san">國語2D·10號厅</view>
				<view class="text_a color_yellow">6排5座 | 6排6座</view> -->
				<!-- 演唱會 -->
				<!-- 電影票 -->
				<view class="text_j color_ling yihang title">[武汉站] [林有嘉]
					《idol》20..99999999999999999999.</view>
				<view class="text_x color_san">2023-09-09 周六 19:30</view>
				<view class="text_a color_san">A1區</view>
				<view class="text_a color_yellow">6排5座 | 6排6座</view>
				<!-- 店家券 -->
				<!-- <view class="text_j color_ling yihang title">郑州銀基游乐园</view>
				<view class="text_x color_san">銀基冰雪成人门票</view>
				<view class="text_a color_yellow">2023-07-14</view> -->
			</view>
			<image class="goodsImg" src="../static/goods.png" mode=""></image>
		</view>
		<image class="connectImg" src="/static/images/order/connect.png" mode=""></image>
		<!-- 二維碼 -->
		<view class=" ffffff borderb" style="margin-top: -2rpx;">
			<view class="codeBox flexcolumn">
				<image class="codeImg" src="../static/goods.png" mode=""></image>
				<view class="blackBg"></view>
				<!-- 已核銷 -->
				<!-- <view class="written_off"></view> -->
				<!-- 已過期 -->
				<view class="expired"></view>
				<view class="text_a color_jiu margin_top">2張可用</view>
			</view>
			<!-- 商家詳情 -->
			<view class="mainpadding line_top line_bottom flexbetween">
				<view>
					<view class="text_w color_ling">郑州奥体中心</view>
					<view class="text_b color_jiu margin_top">郑州丹水大道与雪松路交叉口西南角</view>
				</view>
				<view class="flexleft">
					<view class="margin_right4 text">
						<image class="shopPhone" src="/static/images/index/navigation.png" mode=""></image>
						<view class="text_pee color_san">導航</view>
					</view>
					<view class=" text">
						<image class="shopPhone" src="/static/images/index/phoneShop.png" mode=""></image>
						<view class="text_pee color_san">電話</view>
					</view>
				</view>
			</view>
			<!-- 訂單信息 -->
			<view class="mainpadding">
				<view class="flexbetween">
					<view class="text_a color_ling">訂單編號</view>
					<view class="text_a color_six">12345645646543213</view>
				</view>
				<view class="flexbetween margin_top">
					<view class="text_a color_ling">下單時間</view>
					<view class="text_a color_six">2023-06-23 10:23:20</view>
				</view>
				<view class="flexbetween margin_top">
					<view class="text_a color_ling">核銷時間</view>
					<view class="text_a color_six">2023-06-23 10:23:20</view>
				</view>
				<view class="flexbetween margin_top">
					<view class="text_a color_ling">過期時間</view>
					<view class="text_a color_six">2023-06-23 10:23:20</view>
				</view>
				<!-- <view class="flexbetween margin_top">
					<view class="text_a color_ling">聯係人</view>
					<view class="text_a color_six">李华</view>
				</view>
				<view class="flexbetween margin_top">
					<view class="text_a color_ling">手機號</view>
					<view class="text_a color_six">135895623692</view>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #FFB800;
	}

	.bordert {
		border-radius: 21rpx 21rpx 0 0;
	}

	.borderb {
		border-radius: 0 0 21rpx 21rpx;
	}

	.title {
		width: 450rpx;
	}

	.goodsImg {
		width: 164rpx;
		min-width: 164rpx;
		height: 228rpx;
		border-radius: 6rpx 6rpx 6rpx 6rpx;
	}

	.connectImg {
		width: 100%;
		height: 50rpx;
		display: block;
		margin-top: -1rpx;
	}

	.codeBox {
		padding: 30rpx 30rpx 60rpx;
		box-sizing: border-box;
		position: relative;

		.codeImg {
			width: 383rpx;
			height: 383rpx;
		}

		.blackBg {
			width: 383rpx;
			height: 383rpx;
			background-color: rgba(0, 0, 0, .2);
			position: absolute;
			top: 30rpx;
			left: 50%;
			transform: translateX(-50%);
			z-index: 90;
		}

		// 已核銷
		.written_off {
			width: 200rpx;
			height: 200rpx;
			background-image: url("/static/images/order/written_off.png");
			background-size: 100% 100%;
			position: absolute;
			bottom: 100rpx;
			right: 100rpx;
			z-index: 99;
		}

		// 已過期
		.expired {
			width: 200rpx;
			height: 200rpx;
			background-image: url("/static/images/order/expired.png");
			background-size: 100% 100%;
			position: absolute;
			bottom: 100rpx;
			right: 100rpx;
			z-index: 99;
		}
	}
</style>